<template>
    <div class="app-container">
        <el-form :model="main.queryParams" size="small" :inline="true" v-show="main.showSearch">
            <el-form-item label="选择酒店" prop="hotelName">
                <el-select v-model="main.queryParams.hotelId" filterable placeholder="请选择">
                    <el-option v-for="item in main.hotelListAll" :key="item.hotelId" :label="item.hotelName"
                        :value="item.hotelId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleRpQuery">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="main.loading" :data="main.rpList" class="rpTableClass" :row-class-name="rpDataRowClassName"
            border>
            <el-table-column label="本地酒店名称" prop="localHotel" />
            <el-table-column label="艺龙酒店名称" prop="eHotel" />
            <el-table-column label="房型" prop="localRp" />
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="goOnline(scope.row)">上线</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>

import { getHotelListAll } from "@/api/hotel/hotel";
import { getRpList, goOnline } from "@/api/hotel/rp";


export default {
    name: 'Online',
    data() {
        return {
            main: {
                loading: false,
                showSearch: true,
                queryParams: {
                    hotelId: undefined
                },
                hotelListAll: [],
                rpList: []
            }
        }
    },
    created() {
        this.getHotelListAll();

        if (this.$route.query.hotelId) {
            this.main.queryParams.hotelId = Number(this.$route.query.hotelId);
            this.getRpList()
        }

    },
    methods: {
        // 获取所有酒店数据,用于酒店下拉框
        getHotelListAll() {
            getHotelListAll().then(response => {
                this.main.hotelListAll = response.data;
            }
            );
        },
        getRpList() {
            this.main.loading = true;
            getRpList({ hotelId: this.main.queryParams.hotelId }).then(response => {
                this.main.rpList = response.data
                this.main.loading = false;
            }
            );
        },
        handleRpQuery() {
            if (this.main.queryParams.hotelId) {
                this.getRpList();
            } else {
                this.$message.error('请选择酒店');
            }
        },
        goOnline(row) {
            const that = this;
            if (row.isOnline === 1) {
                this.$message.error('该产品已上线,请勿重复操作');
                return;
            }

            this.$modal.confirm('是否确定上线?').then(function () {
                that.main.loading = true;
                return goOnline(row);
            }).then((res) => {
                if (res.code === 200) {
                    that.$modal.msgSuccess("上线成功");
                    that.getRpList();
                }
            }).catch((error) => {

            }).finally(() => {
                that.main.loading = false;
            });
        },
        rpDataRowClassName({ row, rowIndex }) {
            if (row.isOnline === 1) {
                return 'isonline-row'
            }
            return '';
        },
    }
}


</script>

<style>
.rpTableClass .isonline-row {
    background: palegreen;
}
</style>